<template>
	<view class="videoinfo" :style="'padding-bottom:'+ pageSafeArea +'rpx;'">
		<view class="video_box display_flex" v-if="info.video_url">
			<video class="video_tag" :src="videoUrl+info.video_url" :title="info.title" :controls="true"
				:object-fit='content' :poster="picUrl+info.cover" :style="'height:' + videoHeight">
			</video>
		</view>
		<image v-show="false" style="width: 60%;" mode="widthFix" :src="picUrl+info.cover" @load="loadVideoPoster">
		</image>
		<view class="pd-30">
			<view class="f-18 mt-10">{{info.title}}</view>
			<view v-if="info.time_format" class="f-12 c-999999 display_flex mt-15">
				<view>{{info.time_format}}</view>
				<image class="video_view_img" :src="onlinePic+'video_view.png'"></image>
				<view>{{info.show_num}}人观看</view>
			</view>
			<view class="display_flex mt-20" style="justify-content: flex-end;">
				<view class="display_flex" @click="changeCardPraise">
					<view v-if="info.is_praise==0" class="video_praise_icon_box">
						<image class="video_praise_icon" :src="onlinePic+'video_zan_w.png'">
						</image>
					</view>
					<view v-if="info.is_praise==1" class="video_praise_icon_box_on">
						<image class="video_praise_icon" :src="onlinePic+'video_zan_w.png'">
						</image>
					</view>

					<view class="f-12 c-999999">{{info.praise_num}}</view>
				</view>
				<view class="ml-25">
					<button @click="addShareNum" open-type="share" class="video_share_btn display_flex"
						style="justify-content: center;">
						<view class="video_praise_icon_box">
							<image class="video_share_icon" :src="onlinePic+'video_share.png'"></image>
						</view>
						<view class="f-12 c-999999">{{info.share_num}}</view>
					</button>
				</view>
			</view>
			<view class="mt-15" style="border-top: 1rpx solid #E9E9E9;"></view>
			<view class="groupactiveinfo_content_cell">
				<view class="mt-10">
					<rich-text class="rich_text" :nodes="info.content"></rich-text>
				</view>
				<image v-for="(itemi,index) in info.image" :key="itemi" @click="previewImage(index)"
					class="groupactiveinfo_content_img" :src="picUrl+itemi" mode="widthFix"
					:show-menu-by-longpress="true">
				</image>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" background-color="rgba(0,0,0,0)" :is-mask-click="true" :safe-area="false">
			<view class="share_bottom_popup">
				<image class="share_img" :src="onlinePic+'share_pop.png'" mode="widthFix"></image>
				<view class="share_btn_box">
					<view class="text-c" @click="addShareNum(1)">
						<image class="share_btn_icon" :src="onlinePic+'wechat_circle.png'"></image>
						<view class="c-666666 f-12 mt-10">朋友圈</view>
					</view>
					<view class="text-c" @click="addShareNum(2)">
						<button open-type="share" class="share_btn">
							<image class="share_btn_icon" :src="onlinePic+'wechat.png'"></image>
							<view class="c-666666 f-12 mt-10">微信好友</view>
						</button>
					</view>
				</view>
				<view class="share_bottom_close_popup" @click="colsePopup"></view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getClubBbsInfo,
		changeCardPraise,
		addShareNum,
	} from '@/api/motortime.js';
	let app = getApp()
	export default {
		data() {
			return {
				card_id: '',
				user_id: 0,
				info: {},
				params: {
					card_id: '',
					user_id: 0,
				},
				loadingTitle: '',
				videoStatus: 1,
				videoHeight: '75vw;',
				picUrl: app.globalData.picUrl,
				videoUrl: app.globalData.videoUrl,
				onlinePic: app.globalData.onlinePic,
				pageSafeArea: uni.getSystemInfoSync().safeAreaInsets.bottom ? uni.getSystemInfoSync().safeAreaInsets
					.bottom + 110 : 120,
				bottomSafeArea: uni.getSystemInfoSync().safeAreaInsets.bottom ? uni.getSystemInfoSync().safeAreaInsets
					.bottom : 20
			};
		},
		onShow() {
			if (!uni.getStorageSync('access_token')) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
			if (uni.getStorageSync('onload')) {
				this.user_id = uni.getStorageSync('userinfo') ? uni.getStorageSync('userinfo').user_id : 0
				this.params.user_id = uni.getStorageSync('userinfo') ? uni.getStorageSync('userinfo').user_id : 0
				this.userinfo = uni.getStorageSync('userinfo')
				this.getClubBbsInfo()
				this.params.page = 1
				this.commentlist = []
				uni.removeStorage({
					key: 'onload'
				})
			}
		},
		onLoad(options) {
			this.user_id = uni.getStorageSync('userinfo') ? uni.getStorageSync('userinfo').user_id : 0
			this.params.user_id = uni.getStorageSync('userinfo') ? uni.getStorageSync('userinfo').user_id : 0
			this.card_id = options.card_id ? options.card_id : ''
			this.card_index = options.card_index ? options.card_index : ''
			this.params.card_id = options.card_id ? options.card_id : ''
			this.isComment = options.isComment ? options.isComment : ''
			this.getClubBbsInfo()
		},
		methods: {
			getClubBbsInfo() {
				getClubBbsInfo({
					card_id: this.card_id,
					user_id: this.user_id
				}).then(res => {
					if (res.state == 1) {
						this.info = res.data.info
						var params = {
							event_code: '视频详情',
							path: 'pages/video/videoinfo',
							event_id: this.user_id,
							title: res.data.info.title,
							source_page: '',
							value: '',
						}
						app.BurialPoint(params)
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			loadVideoPoster(e) {
				console.log(e)
				var windowWidth = uni.getSystemInfoSync().windowWidth
				this.videoHeight = parseFloat((e.detail.height * windowWidth) / e.detail.width).toFixed(2) + 'px;'
			},


			//帖子点赞
			changeCardPraise() {
				if (uni.getStorageSync('access_token')) {
					changeCardPraise({
						card_id: this.card_id,
						type: this.info.is_praise == 1 ? 0 : 1
					}).then(res => {
						if (res.state == 1) {
							this.info.praise_num = this.info.is_praise == 1 ? this.info.praise_num - 1 : this.info
								.praise_num + 1
							this.info.is_praise = this.info.is_praise == 1 ? 0 : 1
							var praiseinfo = {
								card_index: this.card_index,
								praise_num: this.info.praise_num,
								is_praise: this.info.is_praise
							}
							uni.setStorage({
								key: 'praiseinfo',
								data: praiseinfo
							})
						} else {
							uni.showToast({
								title: res.error[0],
								mask: true,
								icon: 'none',
								duration: 1500
							})
						}
					})
					var params = {
						event_code: '视频详情',
						path: 'pages/video/videoinfo',
						event_id: this.info.user_id,
						title: this.info.title,
						source_page: '视频详情-点赞/取消赞',
						value: '',
					}
					app.BurialPoint(params)
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},

			showSharePoupBox() {
				if (uni.getStorageSync('access_token')) {
					this.$refs.popup.open()
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			addShareNum(type) {
				if (type == 1) {
					uni.showToast({
						title: '敬请期待',
						mask: true,
						icon: 'none',
						duration: 1500
					})
				} else {
					addShareNum({
						card_id: this.card_id
					}).then(res => {
						if (res.state == 1) {
							this.$refs.popup.close()
							this.info.share_num = this.info.share_num + 1
						} else {
							uni.showToast({
								title: res.error[0],
								mask: true,
								icon: 'none',
								duration: 1500
							})
						}
					})
				}

			},
			colsePopup() {
				this.$refs.popup.close()
			},
			previewImage(index) {
				var that = this
				var urllist = []
				var list = that.info.image
				list.forEach(function(item, index) {
					item = that.picUrl + item
					urllist.push(item)
				});
				uni.previewImage({
					current: index,
					urls: urllist
				});
			},
			playVideoIcon() {
				this.videoStatus = 0
				let videoContextPrev = uni.createVideoContext('subaruVideo', this)
				videoContextPrev.play()
			},
			playVideo() {
				this.videoStatus = 0
			},
			pauseVideo() {
				this.videoStatus = 1
			},
		},
		onPullDownRefresh() {
			this.params.page = 1
			this.getClubBbsInfo()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {},
		onShareAppMessage(res) {
			app.getShareTask()
			return {
				title: this.info.title,
				imageUrl: this.info.cover ? this.picUrl + this.info.cover : this.picUrl + this.info.image[0],
				path: 'pages/video/videoinfo?card_id=' + this.card_id + '&invitees_scene=' + this.user_id
			}
		}
	}
</script>

<style lang="scss">
	.videoinfo {

		//横板视频
		.video_box {
			width: 100%;
			position: relative;
			background-color: #000000;

			.video_tag {
				width: 100%;
				height: 75vw;
				background-color: #000000;
			}

			.video_play_icon {
				width: 90rpx;
				height: 90rpx;
				position: absolute;
				top: 37%;
				left: 0;
				bottom: 0;
				right: 0;
				margin: 0 auto;
				vertical-align: middle;
			}
		}

		.video_view_img {
			width: 27rpx;
			height: 21rpx;
			margin-left: 40rpx;
			margin-right: 10rpx;
			vertical-align: middle;
		}

		.video_praise_icon_box {
			width: 50rpx;
			height: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			margin-right: 10rpx;
			background-color: #00A0DC;
		}

		.video_praise_icon_box_on {
			width: 50rpx;
			height: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			margin-right: 10rpx;
			background-color: #f84949;
		}

		.video_praise_icon {
			width: 24rpx;
			height: 24rpx;
			vertical-align: middle;
		}

		.video_share_icon {
			width: 24rpx;
			height: 24rpx;
			vertical-align: middle;
		}

		.video_share_btn {
			line-height: normal;
			background-color: transparent;
			box-sizing: content-box;
			padding-left: 0 !important;
			padding-right: 0 !important;
		}

		button::after {
			border: 0px solid rgba(0, 0, 0, .2) !important;
		}

		.groupactiveinfo_content_cell {
			font-size: 28rpx;

			.groupactiveinfo_content_img {
				width: 100%;
				vertical-align: middle;
				border-radius: 8rpx;
				margin-top: 20rpx;
			}

			.groupactiveinfo_content_text {
				color: #000000;
				margin-top: 20rpx;
				line-height: 48rpx;
			}

			.rich_text {
				color: #000000;
				line-height: 2;

				img {
					width: 100% !important;
				}
			}
		}
	}
</style>